{layout name="layout/main" /}
{:breadcrumb(['我的消息:admin/message/index', '消息列表'])}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                    <div id="toolbar" class="toolbar-btn-action">
                        <button type="button" class="btn btn-info me-1 btn-sm" onclick="doMessage(0);">
                            全部标为已读
                        </button>
                        <button type="button" class="btn btn-default btn-action me-1 btn-sm" onclick="doMessage(1);" disabled>
                            标记已读
                        </button>
                        <button type="button" class="btn btn-default btn-action me-1 btn-sm" onclick="doMessage(2);" disabled>
                            删除
                        </button>
                    </div>
                    <table id="table"></table>
            </div>
        </div>
    </div>
</div>

<script>
    var selected = [];
    function doMessage(type){
        xp_confirm("{:url('admin/message/post')}", {type: type, arr: selected}, function (){
            selected = [];
            $('#table').bootstrapTable('refresh');
        }, '确定要执行该操作吗?');
    }
    function abc(){
        if (selected.length > 0) {
            $('#toolbar .btn-action').removeAttr('disabled');
        }else{
            $('#toolbar .btn-action').attr('disabled', 'disabled');
        }
    }
    function removePost(id){
        xp_confirm("{:url('admin/message/post')}", { type: 2, arr: [id] }, function (){
            selected = [];
            $('#table').bootstrapTable('refresh');
        }, '确认要删除吗？');
    }
    function viewPost(id){
        window.open("{:url('admin/message/view')}?id=" + id);
    }
    $(function (){
        $('#table').bootstrapTable({
          toolbar: '#toolbar',
          classes: 'table table-bordered table-hover table-striped lyear-table',
          url: "{:url('admin/message/data')}",
          pagination: true,
          search: false,
          pageSize: 20,
          sidePagination: 'server',
          columns: [
                {field: 'example',
                    checkbox: true,
                    width: 5,
                    widthUnit: 'rem'
                },
              {'field': 'title', title: '消息标题', formatter: function(value, item){
                  if (item.is_read == 0){
                      return `<span class="badge bg-danger">未读</span> <strong>${value}</strong>`;
                  }
                  return value;
              }},
              {'field': 'create_time', title: '创建时间'},
              {'field': 'actions', title: '操作', formatter: function(value, item){
                var dom = `<span class="badge bg-info" onclick="viewPost('${item.id}');" style="cursor: pointer;"><span class="mdi mdi-eye-arrow-right-outline"></span> 查看</span>`;
                dom = dom + `<span class="badge bg-danger" onclick="removePost('${item.id}');" style="cursor: pointer; margin-left: 5px;"><span class="mdi mdi-delete-outline"></span> 删除</span>`;
                return dom;
              }},
          ],
          onLoadSuccess: function (){
            selected = [];
          },
          onUncheck:function(row, $element){
                var id = row.id;
                if (selected.indexOf(id) >= 0){
                    selected.splice(selected.indexOf(id), 1);
                }
                abc();
            },
            onCheck:function(row, $element){
                var id = row.id;
                if (selected.indexOf(id) < 0){
                    selected.push(id);
                }
                abc();
            },
            onCheckAll: function (rowsAfter,rowsBefore) {
                if (rowsAfter.length > 0){
                    selected = rowsAfter.map(function (item) {
                        return item.id;
                    });
                }
                abc();
            },
            onUncheckAll: function (rowsAfter,rowsBefore) {
                selected = [];
                abc();
            }
      });
    })
</script>